<template>

  <div style="padding: 10px;">
    <el-row >
      <el-col>
        <div style="display: flex;">
          <div>
            <el-form :model="list_params" ref="searchForm"  size="small" :inline="true">
              <el-form-item label="" label-width="80px" prop="contractNumber">
                <el-input v-model="list_params.contractNumber" placeholder="合同号/货柜号搜索" ></el-input>
              </el-form-item>
              <el-form-item label="销售日期" prop="saleDate">
                <el-date-picker
                  v-model="list_params.saleDate"
                  type="date" value-format="yyyy-MM-dd"
                  placeholder="选择日期">
                </el-date-picker>
              </el-form-item>
              <el-form-item>
                <el-button type="primary"  size="mini" @click="handleQuery">搜索</el-button>
                <el-button  size="mini" @click="resetQuery">重置</el-button>
              </el-form-item>
            </el-form>
          </div>
          <div style="flex: 1;"></div>
          <div>
            <!--                      <el-button>删除</el-button>-->
            <!--                      <el-button @click="handleEnable(0)" >禁用</el-button>-->
            <!--                      <el-button @click="handleEnable(1)" >启用</el-button>-->
<!--            <el-button @click="handleExport">导出</el-button>-->
            <!--                      <el-button>导入</el-button>-->
            <el-button type="primary" @click="addInfo" v-has-permi="['xnf:self:add']" >新增</el-button>
          </div>
        </div>
      </el-col>
      <el-col>
        <div style="margin-top: 10px;">
          <el-table :data="list_data" @selection-change="handleSelectionChange"  :height="table_height" style="width: 100%;" >
            <el-table-column type="selection" width="50" align="center"  />
            <el-table-column label="单据编号" prop="saleListNumber"></el-table-column>
            <el-table-column label="提货日期" prop="saleDate"></el-table-column>
            <el-table-column label="客户" prop="customerName"></el-table-column>
            <el-table-column label="货主" prop="cargoOwnerName"></el-table-column>
            <el-table-column label="合同号" prop="contractNumber"></el-table-column>
            <el-table-column label="货柜号" prop="containerNumber"></el-table-column>
            <el-table-column label="产品" prop="saleProductName"></el-table-column>
            <el-table-column label="销售数量" prop="saleCnt"></el-table-column>
            <el-table-column label="销售重量(KG)" prop="weight"></el-table-column>
            <el-table-column label="金额(元)" prop="amt"></el-table-column>
            <el-table-column label="单据状态" prop="handleStatus">
              <template slot-scope="scope">
                {{scope.row.handleStatus == 1?'已销售':'已撤销'}}
              </template>
            </el-table-column>
            <el-table-column label="创建时间" prop="createTime"></el-table-column>
            <el-table-column label="操作" prop="cargoOwnerName" fixed="right">
              <template slot-scope="scope" >
                <el-button
                  size="mini"
                  type="text"
                  @click="showInfo(scope.row)"
                >查看详情</el-button>
              </template>
            </el-table-column>
          </el-table>
          <pagination
            v-show="list_total>0"
            :total="list_total"
            :page.sync="list_params.pageNum"
            :limit.sync="list_params.pageSize"
            @pagination="getList"
          />
        </div>
      </el-col>
    </el-row>
    <el-drawer title="新增自营销售单" size="80%" :visible.sync="dialog_show">
      <el-form  ref="form"  size="small" :rules="formDataRules" :model="form_data" :inline="true">
        <div>
          <div class="section">
            <el-row :gutter="10">
              <el-col :span="6" >
                <el-form-item label="客户" prop="customerId">
                  <el-select filterable  placeholder="请选择" v-model="form_data.customerId" :style="{width: '100%'}" filterable>
                    <el-option v-for="item in customer_list" :label="item.customerName" :value="item.id" :key="item.id"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6" >
                <el-form-item label="供货单" prop="supplyListId">
                  <el-select filterable  placeholder="请选择" v-model="form_data.supplyListId" :style="{width: '100%'}" @change="onOrderChange" filterable>
                    <el-option v-for="item in order_list" :label="item.contractNumber +' - '+item.containerNumber +' - '+item.cargoOwnerName" :value="item.id" :key="item.id"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6" >
                <el-form-item label="销售日期" prop="saleDate">
                  <el-date-picker v-model="form_data.saleDate" type="date" placeholder="选择日期" style="width: 100%;"></el-date-picker>
                </el-form-item>
              </el-col>
              <el-col>
                <div style="border-bottom: 10px;">销售明细</div>
              </el-col>
              <el-col>
                <el-table :data="order_product_list" show-summary
                          :summary-method="getSummaries">
                  <el-table-column label="序号" >
                    <template slot-scope="scope">
                      {{ scope.$index + 1 }}
                    </template>
                  </el-table-column>
                  <el-table-column label="产品" prop="productName" >
                    <!--                    <template slot-scope="scope">-->
                    <!--                      <el-select filterable  placeholder="请选择" :style="{width: '100%'}" v-model="order_product_list[scope.$index].productId">-->
                    <!--                        <el-option v-for="item in order_products" :label="item.productName" :value="item.productId" :key="item.productId"></el-option>-->
                    <!--                      </el-select>-->
                    <!--                    </template>-->
                  </el-table-column>
                  <el-table-column label="规格" prop="specificationName">
                    <!--                    <template slot-scope="scope">-->
                    <!--                      <el-select filterable  placeholder="请选择" :style="{width: '100%'}" v-model="order_product_list[scope.$index].specificationId">-->
                    <!--                        <el-option v-for="item in spec_list" :label="item.name" :value="item.id"></el-option>-->
                    <!--                      </el-select>-->
                    <!--                    </template>-->

                  </el-table-column>
                  <el-table-column prop="cnt" label="装柜数量"></el-table-column>
                  <el-table-column prop="surplusCnt" label="剩余数量"></el-table-column>
                  <el-table-column label="销售数量" prop="saleCnt" >
                    <template slot-scope="scope">
                      <el-input  v-if="form_data.deliveryWay != 2" v-model="order_product_list[scope.$index].saleCnt" type="number" :max="scope.row.cnt" @blur="onSaleCntChange(scope.$index,scope.row)"></el-input>
                      <div v-else >{{order_product_list[scope.$index].saleCnt}}</div>
                    </template>
                  </el-table-column>
                  <el-table-column label="箱规(KG/件)" prop="boxSpecificationWeight" >
                  </el-table-column>
                  <el-table-column label="重量(KG)" prop="weight" >
                    <!--                    <template slot-scope="scope">-->
                    <!--                      <div v-if="order_product_list[scope.$index].saleCnt == ''">-</div>-->
                    <!--                      <div v-else>{{ order_product_list[scope.$index].boxSpecificationWeight * order_product_list[scope.$index].saleCnt }}</div>-->
                    <!--                    </template>-->
                  </el-table-column>
                  <el-table-column label="销售单价" prop="unitPrice" >
                    <template slot-scope="scope">
                      <el-input type="number" v-model="order_product_list[scope.$index].unitPrice" @blur="onSaleCntChange(scope.$index,scope.row)" :disabled="form_data.deliveryWay == 2" v-if="form_data.deliveryWay != 2"></el-input>
                      <div v-else>{{order_product_list[scope.$index].unitPrice}}</div>
                    </template>
                  </el-table-column>
                  <el-table-column label="销售金额" prop="saleAmt" >
                    <template slot-scope="scope">
                      <el-input v-model="scope.row.saleAmt" type="number" ></el-input>
                    </template>
                  </el-table-column>
                  <el-table-column label="操作" prop="cargoOwnerName" fixed="right" v-if="form_data.deliveryWay != 2">
                    <template slot-scope="scope">
                      <el-button
                        size="mini"
                        type="text"
                        v-if="order_product_list.length > 1"
                        @click="delItem(scope.row,scope.$index)"
                      >删除</el-button>
                      <!--                      <el-button-->
                      <!--                        size="mini"-->
                      <!--                        type="text"-->
                      <!--                        @click="copyItem(scope.row,scope.$index)"-->
                      <!--                      >复制</el-button>-->
                      <el-button
                        size="mini"
                        type="text"
                        @click="chooseProducts(scope.row,scope.$index)"
                      >新增</el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </el-col>
            </el-row>
          </div>

          <div class="section" v-if="form_data.deliveryWay == 2">
            <el-row>
              <el-col :span="6">
                <div class="section-item">
                  <div class="section-item-title">付汇手续费(客户)</div>
                  <div>{{info.customerHandlingFee}}</div>
                </div>
              </el-col>
              <el-col :span="6">
                <div class="section-item">
                  <div class="section-item-title">付汇手续费(资方)</div>
                  <div>{{info.capitalHandlingFee}}</div>
                </div>
              </el-col>
              <el-col :span="6">
                <div class="section-item">
                  <div class="section-item-title">清关费</div>
                  <div>{{clear_info.actualCustomsClearanceFee?clear_info.actualCustomsClearanceFee:0}}</div>
                </div>
              </el-col>
              <el-col :span="6">
                <div class="section-item">
                  <div class="section-item-title">税金</div>
                  <div>{{clear_info.actualImportTax?clear_info.actualImportTax:0}}</div>
                </div>
              </el-col>
              <el-col :span="6">
                <div class="section-item">
                  <div class="section-item-title">国内运费</div>
                  <div>{{clear_info.actualTransportFee?clear_info.actualTransportFee:0}}</div>
                </div>
              </el-col>
              <el-col :span="6">
                <div class="section-item">
                  <div class="section-item-title">服务费</div>
                  <div>0</div>
                </div>
              </el-col>
              <el-col :span="6">
                <div class="section-item">
                  <div class="section-item-title">垫款金额</div>
                  <div>{{amt}}</div>
                </div>
              </el-col>
            </el-row>
          </div>
          <div class="section">
            <div style="padding-bottom: 12px;">其他费用</div>
            <div>
              <el-table :data="other_fees" style="width: 100%" >
                <el-table-column prop="date" label="序号">
                  <template slot-scope="scope" >
                    {{ scope.$index + 1 }}
                  </template>
                </el-table-column>
                <el-table-column prop="date" label="科目">
                  <template slot-scope="scope" >
                    <el-select filterable  v-model="other_fees[scope.$index].financeSubjectId" filterable>
                      <el-option v-for="fee in subject_list" :key="fee.id" :label="fee.name" :value="fee.id" ></el-option>
                    </el-select>
                  </template>
                </el-table-column>
                <el-table-column prop="date" label="金额">
                  <template slot-scope="scope" >
                    <el-input v-model="other_fees[scope.$index].amt"  type="number"></el-input>
                  </template>
                </el-table-column>
                <el-table-column prop="date" label="备注">
                  <template slot-scope="scope" >
                    <el-input v-model="other_fees[scope.$index].remark"></el-input>
                  </template>
                </el-table-column>
                <el-table-column prop="date" label="操作">
                  <template slot-scope="scope" >
                    <el-button
                      size="mini"
                      type="text"
                      v-if="scope.$index != 0"
                      @click="delOtherFee(scope.$index)"
                    >删除</el-button>
                    <el-button
                      size="mini"
                      type="text"
                      @click="addOtherFee(scope.row)"
                    >新增</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </div>




          <div class="section">
            <el-row>
              <el-col :span="12">
                <div>
                  <div style="padding-bottom: 12px;">图片附件</div>
                  <div>

                    <el-form-item prop="pictures" label-width="0px" >
                      <el-upload ref="field101" :file-list="pictures" :action="uploadImgUrl" limit="10" multiple
                                 :headers="headers" :on-success="field101Success" :on-remove="field101Remove"
                                 :before-upload="field101BeforeUpload" list-type="picture-card" accept="image/*">
                        <i class="el-icon-plus"></i>
                      </el-upload>
                    </el-form-item>
                  </div>
                </div>
              </el-col>
              <el-col :span="12">
                <div>
                  <div style="padding-bottom: 12px;">文件附件</div>
                  <div>

                    <el-form-item prop="pictures" label-width="0px" >
                      <el-upload ref="field102" :file-list="files" :action="uploadImgUrl" limit="10" multiple
                                 :headers="headers" :on-success="field102Success" :on-remove="field102Remove"
                                 :before-upload="field101BeforeUpload"  >
                        <el-button size="small" type="primary">点击上传</el-button>
                      </el-upload>
                    </el-form-item>
                  </div>
                </div>
              </el-col>
            </el-row>

          </div>
          <div class="section" style="display: flex;justify-content: flex-end;position: sticky;bottom: 0px;">
            <el-button type="primary" @click="submitData">提交</el-button>
          </div>
        </div>
      </el-form>
    </el-drawer>
    <el-drawer
      title="供应链提货单详情"
      size="80%"
      :visible.sync="edit_dialog_show">
      <div>
        <div class="section">
          <el-row>
            <el-col :span="4" class="section-item">
              <div class="section-item-title">单据编号</div>
              <div>{{ info.saleListNumber	 }}</div>
            </el-col>
            <el-col :span="4" class="section-item">
              <div class="section-item-title">单据状态</div>
              <div>{{ info.handleStatus == 1?'已提货':'已撤销' }}</div>
            </el-col>
            <el-col :span="4" class="section-item">
              <div class="section-item-title">提货日期</div>
              <div>{{ info.saleDate	 }}</div>
            </el-col>
            <el-col :span="4" class="section-item">
              <div class="section-item-title">合同号</div>
              <div>{{ info.contractNumber	 }}</div>
            </el-col>
            <el-col :span="4" class="section-item">
              <div class="section-item-title">货柜号</div>
              <div>{{ info.containerNumber	 }}</div>
            </el-col>
            <el-col :span="4" class="section-item">
              <div class="section-item-title">货主</div>
              <div>{{ info.cargoOwnerName	 }}</div>
            </el-col>
            <el-col :span="4" class="section-item">
              <div class="section-item-title">供货产品</div>
              <div>{{ info.saleProductName	 }}</div>
            </el-col>
            <el-col :span="4" class="section-item">
              <div class="section-item-title">提货数量</div>
              <div>{{ info.saleCnt }}</div>
            </el-col>
          </el-row>
        </div>
        <div class="section">
          <div style="padding-bottom: 12px;">提货明细</div>
          <div>
            <el-table :data="sale_products" show-summary :summary-method="getSummaries1">
              <el-table-column label="序号">
                <template slot-scope="scope" >
                  {{ scope.$index + 1 }}
                </template>
              </el-table-column>
              <el-table-column label="产品" prop="productName" >
              </el-table-column>
              <el-table-column label="规格" prop="specificationName">
              </el-table-column>
              <el-table-column label="提货数量" prop="saleCnt" >
              </el-table-column>
              <el-table-column label="箱规(KG/件)" prop="boxSpecificationWeight" >
              </el-table-column>
              <el-table-column label="重量(KG)" prop="weight" >
              </el-table-column>
              <el-table-column label="单价" prop="unitPrice" >
              </el-table-column>
              <el-table-column label="金额" prop="saleAmt" >
              </el-table-column>
              <el-table-column label="备注" prop="remark" >
              </el-table-column>
            </el-table>
          </div>
        </div>
        <div class="section">
          <div style="padding-bottom: 12px;">其他费用</div>
          <div>
            <el-table :data="sale_fees" show-summary>
              <el-table-column label="序号">
                <template slot-scope="scope" >
                  {{ scope.$index + 1 }}
                </template>
              </el-table-column>
              <el-table-column label="科目" prop="financeSubjectName"></el-table-column>
              <el-table-column label="金额" prop="amt"></el-table-column>
              <el-table-column label="备注" prop="remark"></el-table-column>
            </el-table>
          </div>
        </div>

        <div class="section">
          <el-row>
            <el-col :span="12">
              <div>图片附件</div>
              <div>
                <el-row :gutter="10">
                  <el-col v-for="item in imgs" :span="4" >
                    <el-image
                      style="width: 100%; height: 100px;"
                      :src="item.url"
                      :preview-src-list="imgs.map(img => img.url)"
                    >        </el-image>
                  </el-col>
                </el-row>
              </div>
            </el-col>
            <el-col :span="12">
              <div>文件附件</div>
              <div>
                <div v-for="item in docs" style="background: #F3F4F6;padding: 16px;border-radius: 16px;margin: 10px 0px;display: flex;">
                  <div style="flex: 1;">
                    {{item.name}}
                  </div>
                  <div style="margin: 0px 10px;cursor: pointer;" @click="openNav(item.url)" ><i class="el-icon-view"></i></div>
                  <div style="margin: 0px 10px;cursor: pointer;" @click="openNav(item.url)"  ><i class="el-icon-download"></i></div>
                </div>
              </div>
            </el-col>
          </el-row>
        </div>
        <div class="section">
          <div>
            <div>本单金额：{{info.amt}}元</div>
            <div>本单实收：{{info.paid}}元</div>
            <div>本次欠款：{{info.amt-info.paid}}元</div>
            <div>单据备注：{{info.remark}}</div>
          </div>
        </div>
      </div>
    </el-drawer>
    <el-dialog :visible.sync="chooseProductDialog" title="产品选择" >
      <el-table :data="choose_products" @selection-change="handleProductSelectionChange" >
        <el-table-column type="selection" width="50" align="center"  />
        <el-table-column label="产品" prop="productName" >
        </el-table-column>
        <el-table-column label="规格" prop="specificationName">
        </el-table-column>
        <el-table-column prop="cnt" label="装柜数量"></el-table-column>
        <el-table-column label="提货数量" prop="saleCnt" >
          <template slot-scope="scope">
            <el-input  v-model="scope.row.saleCnt" type="number" :max="scope.row.cnt" @blur="onSaleCntChange(scope.$index,scope.row)"></el-input>
          </template>
        </el-table-column>
        <el-table-column label="箱规(KG/件)" prop="boxSpecificationWeight" >
        </el-table-column>
        <el-table-column label="重量(KG)" prop="weight" >
        </el-table-column>
        <el-table-column label="单价" prop="unitPrice" >
          <template slot-scope="scope">
            <el-input type="number" v-model="scope.row.unitPrice" @blur="onSaleCntChange(scope.$index,scope.row)"></el-input>
          </template>
        </el-table-column>
        <el-table-column label="金额" prop="saleAmt" >
          <template slot-scope="scope">
            <el-input v-model="scope.row.saleAmt" type="number"></el-input>
          </template>
        </el-table-column>
      </el-table>

      <div slot="footer" class="dialog-footer">
        <el-button @click="chooseProductDialog = false">取 消</el-button>
        <el-button type="primary"@click="confirmProducts">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {add,list,detail,getSaleProductList} from '@/api/sell/sale_list'
import {list as subjectList} from '@/api/base/subject'
import {list as sellingList } from '@/api/agency/selling'
import { list as productList} from '@/api/product/info'
import {list as specList} from '@/api/product/spec'
import { list as customerList } from '@/api/base/custom'
import { list as orderList,detail as orderDetail,getProductList } from '@/api/supply/order'
import { list as clearList } from "@/api/clearance/order";
import { list as feeList } from "@/api/fee/fee";

import { getToken } from '@/utils/auth'
import { getUploadFiles,getUploadFileUrls } from '@/api/common'
export default {
  name: 'sea_transportation',
  data() {
    return {
      uploadImgUrl: process.env.VUE_APP_BASE_API + "/common/file/upload", // 上传的图片服务器地址
      headers: {
        Authorization: "Bearer " + getToken(),
      },
      pictures:[],
      files:[],
      chooseProductDialog:false,
      table_height:window.innerHeight - 300,
      dialog_show : false,
      edit_dialog_show : false,
      fees:[{ financeSubjectId:'' }],
      subject_list:[],
      other_fees:[{ financeSubjectId:'' }],
      selling_list:[],
      order_product_list:[],
      order_products:[],
      choose_products:[],
      product_list:[],
      selected_products:[],
      sale_products:[],
      spec_list:[],
      activities: [{
        content: '活动按期开始',
        timestamp: '2018-04-15'
      }, {
        content: '通过审核',
        timestamp: '2018-04-13'
      }, {
        content: '创建成功',
        timestamp: '2018-04-11'
      }],
      form_data:{
        deliveryWay:'',
        saleDate:'',
        paymentTerms:''
      },
      formDataRules:{
        supplyListId: [{ required: true, message: '请选择供货单', trigger: 'change' }],
        customerId: [{ required: true, message: '请选择客户', trigger: 'change' }],
        saleDate: [{ required: true, message: '请选择销售日期', trigger: 'change' }],
      },
      list_data:[],
      list_total:0,
      list_params:{
        manageType:2,
        contractNumber:'',
        pageSize:10,
        pageNum:1,
      },
      customer_list:[],
      order_list:[],
      info:{},
      sale_fees:[],
      clear_info:{},
      amt:0
    }
  },
  created() {
    this.getSubjectList()
    this.getSellingList()
    this.getAllProductList()
    this.getSpecList()
    this.getList()
    this.getCustomerList()
    this.getOrderList()
  },
  methods: {
    getOrderList(){
      orderList({
        manageType:2,
        supplyListStatusList:'7,8,9,10,11',is_page:0
      }).then(res => {
        console.log(res)
        this.order_list =  res.rows;
      })
    },
    getCustomerList(){
      customerList({is_page:0}).then(res => {
        console.log(res)
        this.customer_list =  res.rows;
      })
    },
    getList(){
      let params = {
        ...this.list_params,
        manageType: 2,
      }
      list(params).then(res => {
        console.log(res)
        this.list_data =  res.rows;
        this.list_total = res.total
      })
    },
    addOtherFee(row){
      this.other_fees.push({ financeSubjectId:'' })
    },
    delOtherFee(row){
      this.other_fees.splice(row,1)
    },
    getSpecList(){
      specList({is_page:0}).then(res => {
        console.log(res)
        this.spec_list =  res.rows;
      })
    },
    getAllProductList(){
      productList({is_page:0}).then(res => {
        console.log(res)
        this.product_list =  res.rows;
      })
    },
    getSellingList(){
      sellingList({is_page:0}).then(res => {
        console.log(res)
        this.selling_list =  res.rows;
      })
    },
    getSubjectList(){
      subjectList({is_page:0}).then(res => {
        console.log(res)
        this.subject_list =  res.rows;
      })
    },
    handleQuery() {
      this.getList()
    },
    resetQuery(){
      this.list_params = {
        ...this.list_params,
        pageNum:1,
        contractNumber:'',
        saleDate:''
      }
      this.getList()
    },
    showInfo(info){
      this.edit_dialog_show = true
      detail(info.id).then(res => {
        console.log(res)
        this.info = res.data;
        this.fees = res.data.fees;
        this.other_fees = res.data.other_fees;
        this.form_data = res.data;
        this.form_data.deliveryWay = -1;
        this.loadSaleProductList();
        this.loadSaleFees()

        let imgs = res.data.imgFiles;
        let docs = res.data.docFiles;
        console.log(imgs)
        if (imgs != ''){
          getUploadFiles(imgs).then((img_res)=>{
            this.imgs = getUploadFileUrls(img_res.data);
            this.pictures = this.imgs;
          })
        }
        if (docs != ''){
          getUploadFiles(docs).then((img_res)=>{
            this.docs = getUploadFileUrls(img_res.data);
            this.files = this.docs;
          })
        }
      })
    },
    loadSaleFees(){
      let params = {
        saleListId:this.info.id,
        supplyListId:this.info.supplyListId,
        bizType:6,is_page:0
      }
      feeList(params).then(res => {
        console.log(res)
        this.sale_fees = res.rows;
      })
    },
    loadSaleProductList(){
      let params = {
        saleListId:this.info.id
      }
      getSaleProductList(params).then(res => {
        this.sale_products = res.rows
      })
    },
    addInfo(){
      this.dialog_show = true
      this.$refs.form.resetFields();
      this.other_fees = [{}]
    },
    onOrderChange(){
      orderDetail(this.form_data.supplyListId).then(res => {
        console.log(res)
        this.info = res.data;
      })
      this.order_product_list = []
      this.form_data.deliveryWay = -1;
      this.loadProductList();
      // let supplyListId = this.selling_list.filter(item => item.id == e)[0].supplyListId
      // this.supplyListId = supplyListId
    },
    loadProductList(){
      let params = {}
      getProductList(this.form_data.supplyListId).then(res => {
        console.log(res)
        // this.order_product_list = res.rows
        this.order_products = JSON.parse(JSON.stringify(res.rows));
        let order_product_list = res.rows;
        this.order_product_list = order_product_list;
      })
    },
    onSaleCntChange(index,row){
      if (row.saleCnt > row.cnt){
        row.saleCnt = row.cnt
      }
      let weight = row.boxSpecificationWeight*row.saleCnt
      let saleAmt = row.unitPrice * weight;
      this.$set(row,'weight',weight);
      this.$set(row,'saleAmt',saleAmt);
    },
    submitData(){
      console.log(this.order_product_list)
      console.log(this.fees)
      console.log(this.other_fees)
      console.log(this.form_data)
      this.$refs.form.validate((valid) => {
        if (valid) {
          let fees = this.fees;
          let other_fees = this.other_fees;
          let arr = [];
          for (let i = 0; i < fees.length; i++) {
            if (fees[i].financeSubjectId && fees[i].amt){
              fees[i].bizType = 5;
              arr.push(fees[i]);
            }
          }
          for (let i = 0; i < other_fees.length; i++) {
            if (fees[i].financeSubjectId && fees[i].amt) {
              other_fees[i].bizType = 6;
              arr.push(other_fees[i]);
            }
          }
          let order_product_list = this.order_product_list;

          let saleAmt,saleWeight = 0;
          let xnfSaleProductDetailList = [];
          for (let i = 0; i < order_product_list.length; i++) {
              console.log(order_product_list[i])
              if (!order_product_list[i].saleCnt){
                this.$message.error('请填写'+order_product_list[i]['productName']+'['+order_product_list[i]['specificationName']+']'+'提货数量')
                return;
              }
              if (!order_product_list[i].unitPrice){
                this.$message.error('请填写'+order_product_list[i]['productName']+'['+order_product_list[i]['specificationName']+']'+'单价')
                return;
              }
              if (!order_product_list[i].saleAmt){
                this.$message.error('请填写'+order_product_list[i]['productName']+'['+order_product_list[i]['specificationName']+']'+'金额')
                return;
              }

            saleAmt+=parseFloat(order_product_list[i].saleAmt)
            saleWeight+=parseFloat(order_product_list[i].weight)
            let product = {
              ...order_product_list[i],
              productListId:order_product_list[i].id,
              id:undefined
            }
            xnfSaleProductDetailList.push(product)
          }
          let form_data = {
            ...this.form_data,
            xnfFeeList: arr,
            xnfSaleProductDetailList: xnfSaleProductDetailList,
            enable: 1,
            manageType: 2,
            amt:saleAmt,
            weight:saleWeight,
            paymentTerms:'1'
          }

          console.log(form_data)
          add(form_data).then(res => {
            console.log(res)
            this.dialog_show = false
            this.getList()
          })
        } else {
          return false;
        }
      })
    },
    delItem(row,index){
      this.order_product_list.splice(index,1)
    },
    getSummaries(param){
      const { columns, data } = param;
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '合计';
          return;
        }else if(index === 5 || index === 7 || index === 9){
          const values = data.map(item => Number(item[column.property]));
          if (!values.every(value => isNaN(value))) {
            sums[index] = values.reduce((prev, curr) => {
              const value = Number(curr);
              if (!isNaN(value)) {
                return prev + curr;
              } else {
                return prev;
              }
            }, 0);
          }
        }
      })

      return sums;
    },
    getSummaries1(param){
      const { columns, data } = param;
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '合计';
          return;
        }else if(index === 3 || index === 5 || index === 7){
          const values = data.map(item => Number(item[column.property]));
          if (!values.every(value => isNaN(value))) {
            sums[index] = values.reduce((prev, curr) => {
              const value = Number(curr);
              if (!isNaN(value)) {
                return prev + curr;
              } else {
                return prev;
              }
            }, 0);
          }
        }
      })

      return sums;
    },
    onDeliveryWayChange(){
      if (!this.form_data.supplyListId){
        this.$message.error('请先选择供货单')
        this.form_data.deliveryWay = -1;
        return;
      }
      this.loadProductList()
      this.loadFees();
    },
    loadFees(){
      clearList({supplyListId:this.form_data.supplyListId,is_page:0}).then((res=>{
        if (res.rows.length != 0){
          this.clear_info = res.rows[0];
        }
      }))
      feeList({supplyListId: this.form_data.supplyListId,is_page:0}).then((res)=>{
        console.log(res.rows)
        let amt = 0;
        res.rows.forEach((item)=>{
          amt+=parseFloat(item.amt)
        })
        this.amt = amt;
      })
    },
    chooseProducts(){
      console.log(this.order_products.length)
      console.log(this.order_product_list.length)
      let arr = [];
      for (let i = 0;i < this.order_products.length; i++){
        let flag = true;
        for (let j = 0;j < this.order_product_list.length; j++){
          if (this.order_products[i].id == this.order_product_list[j].id){
            flag = false;
          }
        }
        if (flag){
          arr.push(this.order_products[i])
        }
      }
      this.choose_products = arr;
      this.chooseProductDialog = true;
    },
    confirmProducts(){
      this.chooseProductDialog = false;
      this.order_product_list = this.order_product_list.concat(this.selected_products);

    },
    handleProductSelectionChange(selection){
      console.log(selection)
      this.selected_products = selection;
    },

    field101BeforeUpload(file) {
      const postfix= file.name.substring(file.name.lastIndexOf('.')+1)
      if(!this.fileSuffix.includes(postfix)){
        this.$message.error('文件类型仅支持'+this.fileSuffix);
        return false
      }
      console.log(postfix)
    },
    field101Success(e){
      console.log('field101Success')
      console.log(e)
      let imgFiles = this.form_data.imgFiles?this.form_data.imgFiles:'';
      console.log(imgFiles)
      let imgs = imgFiles == ''?[]:imgFiles.split(',');
      imgs.push(e.data.id)
      this.form_data = {
        ...this.form_data,
        imgFiles:imgs.join(',')
      }
      console.log(this.form_data)
    },
    field101Remove(file, fileList){
      let ids = []
      fileList.forEach((item)=>{
        if (item.id){
          ids.push(item.id);
        }else{
          ids.push(item.response.data.id)
        }
      })
      this.form_data = {
        ...this.form_data,
        imgFiles:ids.join(','),
      }
    },
    field102BeforeUpload(file) {
    },
    field102Success(e){
      console.log(e)
      let docFiles = this.form_data.docFiles?this.form_data.docFiles:'';
      let docs = docFiles == ''?[]:docFiles.split(',');
      docs.push(e.data.id)
      this.form_data = {
        ...this.form_data,
        docFiles:docs.join(',')
      }
    },
    field102Remove(file, fileList){
      let ids = []
      fileList.forEach((item)=>{
        if (item.id){
          ids.push(item.id);
        }else{
          ids.push(item.response.data.id)
        }
      })
      this.form_data = {
        ...this.form_data,
        docFiles:ids.join(','),
      }
    },
    openNav(url){
      window.open(url)
    }
  }
}
</script>

<style scoped>

</style>

<style scoped>
.section{
  background: #fff;
  padding: 24px;
//padding-bottom: 6px;
  margin: 20px;
  border-radius: 8px;
}
.section-item{
  margin: 10px 0px;
  height: 52px;
}
.section-item-title{
  padding-bottom: 10px;
  font-size: 14px;
}
</style>

<style>

.el-drawer__body{
  background: #F3F4F6;
}
.select-custom-icon .el-input__suffix {
  display: none; /* 隐藏默认的下拉箭头 */
}
.select-custom-icon .el-input__suffix::after {
  content: url('../../../assets/icons/more.png'); /* 替换为您的自定义图标路径 */
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
}
.popper-class{
  display: none;
}

</style>
